<template>
  <div id="login">
    <transition appear appear-active-class="fade">
      <div class="container">
        <form class="login-form">
          <div class="toptip">注册</div>
          <input type="text" placeholder="用户名" v-model="username" maxlength="20" />
          <input type="password" placeholder="密码" v-model="password" maxlength="20" />
          <input
            type="password"
            placeholder="确认密码"
            v-model="againPassword"
            maxlength="20"
          />
          <button @click.prevent="register">
            <span>注册</span>
          </button>
          <button @click.prevent="$router.push('/login')">返回登录</button>
        </form>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import axios from "@/http";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { md5 } from "@/util/util";
import msg from "@/components/msg/msg";
const username = ref<string>("");
const password = ref<string>("");
const againPassword = ref<string>("");
const $router = useRouter();

const register = () => {
  if (password.value !== againPassword.value) {
    msg.error("两次密码不同");
    return;
  } else if (password.value === "" || username.value === "") {
    msg.error("请输入用户名或密码");
    return;
  } else {
    const newPassword = md5(password.value);
    axios
      .post("/user/register", {
        username: username.value,
        password: newPassword,
        realname: username.value,
      })
      .then((res) => {
        console.log(res);
        if (res.data.error === 0) {
          msg.error("用户名或密码错误");
        } else {
          msg.success("注册成功");
          $router.push("/login");
        }
      });
  }
};
</script>

<style lang="scss" scoped>
.fade {
  opacity: 0;
  animation: leave 0.5s linear;
}
@keyframes leave {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  // box-sizing: content-box;
}
@font-face {
  font-family: "advice";
  src: url("../../assets/font/advice (2).woff");
  src: url("../../assets/font/advice (2).woff") format("woff");
}
.toptip {
  font-family: advice;
  font-size: 35px;
}
.login-form {
  // border-radius: 15px;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 100;
  overflow: hidden;
}
.login-form p {
  color: red;
  font-size: 12px;
  text-align: center;
}
.login-form::before {
  content: "";
  // border-radius: 15px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 6px;
  left: 4px;
  z-index: -1;
  filter: blur(6px);
  overflow: hidden;
}
.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  color: #333;
}

.login-form input,
.login-form button {
  margin: 6px 0;
  height: 36px;
  border: none;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 0 14px;
  color: #333;
}
.login-form input::placeholder {
  color: #3d5245;
}
.login-form button {
  border-radius: 5px;

  margin-top: 8px;
  background-color: rgba(57, 88, 69, 0.4);
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s;
}
.login-form button:hover {
  background-color: rgba(12, 80, 38, 0.67);
}

.login-form button::before,
.login-form button::after {
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  background-color: rgba(179, 255, 210, 0.5);
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  transform: skewX(-15deg);
  filter: blur(30px);
  overflow: hidden;
  transform: translateX(-100px);
}
.login-form button::after {
  width: 40px;
  background-color: rgba(179, 255, 210, 0.3);
  left: 60px;
  filter: blur(5px);
  opacity: 0;
}
.login-form button:hover::before {
  transition: 1s;
  transform: translateX(320px);
  opacity: 0.7;
}
.login-form button:hover::after {
  transition: 1s;
  transform: translateX(320px);
  opacity: 1;
}
</style>
